<div fxLayout="column" fxLayout.gt-xs="row wrap" fxLayoutGap="10px">
  <!-- Droids -->
  <div
    class="flex-item"
    *ngFor="let unit of ms.game.resourceManager.unlockedWorkers; trackBy: getId"
    fxFlex.xs="0 0 calc(100%)"
    fxFlex.sm="0 0 calc(50% -10px)"
    fxFlex.md="0 0 calc(33% -10px)"
    fxFlex.lg="0 0 calc(25% -10px)"
    fxFlex.xl="0 0 calc(20% -10px)"
  >
    <app-unit-card [unit]="unit"> </app-unit-card>
  </div>

  <!-- Tutorial -->
  <div class="flex-item" *ngIf="!ms.game.resourceManager.scientist.unlocked">
    <nz-card style="width: 100%" [nzTitle]="locked" nzSize="small">
      <p>To unlock you need:</p>
      <ul>
        <li>
          <span
            *ngIf="ms.game.resourceManager.technician.quantity.gte(30); else x"
            nz-text
            class="text-success"
            nzType="success"
          >
            <i nz-icon nzType="check" nzTheme="outline"></i
          ></span>
          30 Technician
        </li>
        <li>
          <span
            *ngIf="ms.game.resourceManager.miner.quantity.gte(30); else x"
            nz-text
            class="text-success"
            nzType="success"
          >
            <i nz-icon nzType="check" nzTheme="outline"></i
          ></span>
          30 Miner
        </li>
      </ul>
    </nz-card>
  </div>
  <div class="flex-item info-panel" *ngIf="os.operativityInfo">
    <nz-alert
      nzType="warning"
      nzMessage="Drones Info"
      [nzDescription]="opInfo"
      nzShowIcon
      nzCloseText="Dismiss"
      (nzOnClose)="closeOperativityInfo()"
    ></nz-alert>
    <ng-template #opInfo>
      <p>
        Drones operativity can be adjusted with the slider. In case you run out
        resources (like energy) every drones that depend on it will stop working
        permanently. To fix drag the sliders to the right.<br />
        Technicians are always 100% operative.
      </p>
    </ng-template>
  </div>
  <div class="flex-item info-panel" *ngIf="os.districtInfo">
    <nz-alert
      nzType="info"
      nzMessage="Districts Info"
      [nzDescription]="districtsInfo"
      nzShowIcon
      nzCloseText="Dismiss"
      (nzOnClose)="closeDistrictInfo()"
    ></nz-alert>
    <ng-template #districtsInfo>
      <p>
        <span class="habSpace-color">
          <i nz-icon nzType="fa-s:globe"></i>
          Habitable space </span
        >,
        <span class="metal-color">
          <i nz-icon nzType="my:mining"></i>
          Mining districts
        </span>
        and
        <span class="energy-color">
          <i nz-icon nzType="my:solar-power"></i>
          Energy districts
        </span>
        are required to build buildings. Districts can be obtained from battle.
        It may take a while before you're ready to engage battle, so don't waste
        them (don't buy batteries!).
      </p>
    </ng-template>
  </div>

  <!-- Buildings -->
  <div
    fxFlex.gt-xs="1 1 310px"
    fxFlex="1"
    class="flex-item"
    *ngFor="
      let unit of ms.game.resourceManager.unlockedBuildings;
      trackBy: getId
    "
  >
    <app-unit-card [unit]="unit"> </app-unit-card>
  </div>
</div>

<ng-template #locked
  ><i nz-icon nzType="lock" nzTheme="outline"></i> Locked</ng-template
>

<ng-template #x>
  <span nz-text nzDanger><i nz-icon nzType="close" nzTheme="outline"></i></span>
</ng-template>
